<template>
  <main class="homepage-main">
    <home-window></home-window>
    <div class="card-group">
      <div id="myChart" class="home-echarts"></div>
    </div>
  </main>
</template>
<script>
import { getWaitBidAll, getAllList } from "api/require.api";
import HomeWindow from "../../components/pages/window/index.vue";

export default {
  name: "homepage",
  data() {
    return {};
  },
  components: {
    HomeWindow,
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      let { data } = getAllList();
      data = data.filter((e) => {
        return !!e.bidCompany;
      })
      const map = new Map();
      console.log('data', data);
      data.forEach((item) => {
        item.company?.forEach((e) => {
          map.set(e, (map.get(e) || 0) + 1);
        })
      });
      let rooms = [];
      let counts = [];
      for (let i of map) {
        rooms.push(i[0]);
        counts.push(i[1]);
      }
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        color: "#2376b7",
        textStyle: {
          color: "white",
        },
        title: {
          text: "投标公司活跃度一览",
          left: "center",
          textStyle: {
            color: "white",
            textAlign: "center",
          },
        },
        tooltip: {},
        xAxis: {
          type: "category",
          data: rooms,
          nameTextStyle: {
            color: "white",
            align: "center",
          },
        },
        yAxis: {
          type: "value",
          nameTextStyle: {
            color: "white",
            align: "center",
          },
        },
        series: [
          {
            name: "活跃度",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
            type: "bar",
            data: counts,
          },
        ],
      });
    },
    handleNumber() {
      const routeData = getWaitBidAll().data;
      console.log("routeData", routeData);
      this.cardGroup.forEach((item) => {
        switch (item.title) {
          case "招投标管理":
            item.list[1].number = routeData ? routeData.length : 0;
            break;
          case "法定招投标":
            item.list[1].number = routeData ? routeData.length : 0;
            break;
          default:
            break;
        }
      });
    },
    handleRouter(route) {
      if (!route) {
        return;
      }
      this.$router.push(route);
    },
  },
};
</script>

<style lang='less' scoped>
.homepage-main {
  background: radial-gradient(circle, #8979c8 300px, #2d1cc4);
  height: 100%;
  width: 100%;
  position: relative;
}
.home-echarts {
  width: 100%;
  height: 100vh;
}
.card-group {
  display: flex;
  margin-left: 20px;
  padding-top: 350px;
  justify-content: space-around;
  > div {
    margin-right: 20px;
  }
  ::v-deep {
    .el-card {
      width: 250px;
      border: 0;
      height: 300px;
    }
    .item {
      margin-bottom: 10px;
    }
  }
  .box-card {
    position: relative;
    .home-card-item {
      cursor: pointer;
      &:hover {
        color: rgb(86, 86, 209);
        font-weight: 700;
      }
    }
    .border-top-line {
      position: absolute;
      height: 5px;
      top: 0;
      left: 0;
      width: 100%;
    }
  }
}
</style>
